<template>
  <div class="stage">
    <div class="assort">
      <button @click="msgShow = true">留言</button>
      <button @click="pressTackle" :class="{ tackle: isTackle }">催办</button>
      <button @click="pressRoam" :class="{ roam: isRoam }">流转</button>
    </div>

    <a-modal
      title="工作留言"
      v-model="msgShow"
      centered
      width="560px"
      destroyOnClose
      @ok="msgSubmit"
    >
      <zh-row>
        <zh-input
          v-model="keywords"
          :labelCol="{ span: 0 }"
          :wrapperCol="{ span: 24 }"
          type="textarea"
          placeholder="请输入工作留言"
          :span="24"
          :rows="6"
        ></zh-input>
      </zh-row>
    </a-modal>
    <a-modal
      title="流转"
      v-model="roamShow"
      centered
      width="560px"
      destroyOnClose
      @ok="roamSubmit"
    >
      <zh-form
        :span="24"
        style="padding-right: 20px"
        :wrapperCol="{ span: 20 }"
        :labelCol="{ span: 4 }"
      >
        <zh-input
          type="select"
          :options="unitList"
          :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
          label="部门"
          placeholder="请选择部门"
          v-model="form.department"
          @change="changeDepartment"
        ></zh-input>
        <zh-input
          type="select"
          :options="personList"
          :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
          label="人员"
          placeholder="请选择人员"
          v-model="form.personnel"
        ></zh-input>
        <zh-input
          v-model="form.e0315"
          label="流转原因"
          type="textarea"
          placeholder="请输入流转原因"
          :span="24"
          :rows="6"
        ></zh-input>
      </zh-form>
    </a-modal>
  </div>
</template>

<script>
import {
  leaveMessage,
  pressToDo,
  pressToMove,
  getDepsOfUnit,
  getPersonListByDepId,
} from "@/services/system/flowPath";
export default {
  props: {
    id: {
      type: [String, Number],
      default: "",
    },
    e0301: {
      type: [String, Number],
      default: "",
    },
    isTackle: {
      type: Boolean,
      default: false,
    },
    isRoam: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      keywords: "",
      msgShow: false,
      roamShow: false,
      form: {},
      unitList: [],
      personList: [],
    };
  },
  created() {
    this.getUnitList();
  },
  methods: {
    getUnitList() {
      this.$http.post(getDepsOfUnit, {}).then((res) => {
        if (res.code === 0) {
          let data = res.result || [];
          this.unitList = data.map((el) => {
            return {
              dictValue: el.a0103Name,
              dictKey: el.a0103,
            };
          });
        }
      });
    },
    // 留言
    msgSubmit() {
      if (!this.keywords) {
        this.$message.error("请输入工作留言！");
        return;
      }
      this.$http
        .post(leaveMessage, {
          e0301: this.e0301,
          e0403: this.keywords,
        })
        .then((res) => {
          if (res.code === 0) {
            this.msgShow = false;
            this.oprateConfirm("留言成功！");
          } else {
            this.oprateConfirm(res.message, "error");
          }
        });
    },
    // 催办
    pressTackle() {
      if (!this.isTackle) return;
      let _this = this;
      this.$confirm({
        title: `温馨提示`,
        content: `确认发送催办？`,
        centered: true,
        onOk() {
          _this.insureTackle();
        },
        onCancel() {},
        autoFocusButton: null,
      });
    },
    insureTackle() {
      this.$http
        .post(pressToDo, {
          e0301: this.e0301,
        })
        .then((res) => {
          if (res.code === 0) {
            this.oprateConfirm("催办成功！");
          } else {
            this.oprateConfirm(res.message, "error");
          }
        });
    },
    changeDepartment(val) {
      this.$http
        .post(getPersonListByDepId, {
          a0103: this.form.department,
        })
        .then((res) => {
          if (res.code === 0) {
            let data = res.result || [];
            this.personList = data.map((el) => {
              return {
                dictValue: el.fullName,
                dictKey: el.userId,
              };
            });
          }
        });
    },
    // 流转
    pressRoam() {
      if (!this.isRoam) return;
      this.roamShow = true;
    },
    roamSubmit() {
      if (!this.form.department) {
        this.$message.error("请选择部门！");
        return;
      }
      if (!this.form.personnel) {
        this.$message.error("请选择人员！");
        return;
      }
      if (!this.form.e0315) {
        this.$message.error("请输入流转原因！");
        return;
      }
      let personnelName;
      for (let el of this.personList) {
        if (this.form.personnel === el.dictKey) {
          personnelName = el.dictValue;
          break;
        }
      }
      let _this = this;
      this.$confirm({
        title: `温馨提示`,
        content: `是否长期变更该区域处置人为${personnelName}？`,
        centered: true,
        cancelText: "是",
        okText: "仅此一次",
        onOk() {
          _this.deliver(false);
        },
        onCancel() {
          _this.deliver(true);
        },
        autoFocusButton: null,
      });
    },
    deliver(flag) {
      this.$http
        .post(pressToMove, {
          e0201: this.id,
          e0216: this.form.personnel,
          e0315: this.form.e0315,
          changeUser: flag,
        })
        .then((res) => {
          if (res.code === 0) {
            this.roamShow = false;
            this.oprateConfirm("流转成功！");
          } else {
            this.oprateConfirm(res.message, "error");
          }
        });
    },
    oprateConfirm(message, code = "success") {
      this.$notification[code]({
        message: "提示",
        description: message,
        duration: 4,
      });
      if (code === "success") {
        setTimeout(() => {
          this.$emit("managerModalClose");
        }, 300);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.stage {
  padding: 6px 0.4rem;
  background: #fff;
  .assort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 480px;
    margin: 0 auto;
    padding: 10px 30px;
    button {
      flex: 0 0 auto;
      width: 120px;
      height: 36px;
      margin-left: 20px;
      border: none;
      border-radius: 4px;
      box-sizing: border-box;
      background: #ccc;
      text-align: center;
      color: #ffffff;
      outline: none;
      cursor: pointer;
      &:first-child {
        background: #156abc;
      }
      &.tackle {
        background: #d68b01;
      }
      &.roam {
        background: #249f1d;
      }
    }
  }
}
</style>
